<template>
  <div>
    <el-table :data="state.tableData" style="width: 100%">
      <el-table-column label="日期" width="180">
        <template #default="scope">
          <span>{{parseTime(scope.row.submission_date)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="project_name" label="姓名" min-width="180">
      </el-table-column>
      <el-table-column prop="project_explain" label="地址" min-width="300">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.index_, scope)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.index_, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :page-data="state.pageData" @page-chenge="pageChenge" />
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import Pagination from "@/components/Pagination/index";
import { fileList } from "@/api/file";
import { parseTime } from "@/utils/index";
export default {
  components: { Pagination },
  setup() {
    const state = reactive({
      tableData: [
        {
          submission_date: "2016-05-02",
          project_name: "王小虎",
          project_explain: "上海市普陀区金沙江路 1518 弄",
        },
        {
          submission_date: "2016-05-04",
          project_name: "王小虎",
          project_explain: "上海市普陀区金沙江路 1517 弄",
        },
        {
          submission_date: "2016-05-01",
          project_name: "王小虎",
          project_explain: "上海市普陀区金沙江路 1519 弄",
        },
        {
          submission_date: "2016-05-03",
          project_name: "王小虎",
          project_explain: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      pageData: {
        total: 0,
        page_size: 10,
      },
      page: 1,
    });
    onMounted(() => {
      fileListT();
    });
    function handleEdit(index, row) {
      console.log(index, row);
    }
    function handleDelete(index, row) {
      console.log(index, row);
    }
    function fileListT() {
      const data = {
        page: state.page,
      };
      fileList(data).then((res) => {
        state.tableData = res.data.results;
        state.pageData.total = res.data.count;
        // state.tableData.forEach((item) => {
        //   item.submission_date = parseTime(item.submission_date);
        // });
      });
    }
    function pageChenge(e) {
      state.page = e;
      fileListT();
    }
    return {
      state,
      handleEdit,
      handleDelete,
      fileListT,
      pageChenge,
      parseTime,
    };
  },
};
</script>

